<style>
#avatar>img{
    width:100px;
    height:100px;
    border-radius: 50%;
}
#avatar>img:hover{
    cursor:pointer;
}
</style>
<template>
<div id="avatar">
    <avatar-upload field="img"
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
        v-model="show"
        :width="300"
        :height="300"
        :url="uploadUrl"
        :headers="headers"
        img-format="png"></avatar-upload>
    <img :src="imgUrl" @click="toggleShow">
</div>
 </template>

<script>
    //import 'babel-polyfill'; // es6 shim
    import avatarUpload from 'vue-image-crop-upload';
    export default{
        name:'Avatar',
        data(){
            return{
                show: false,
                imgUrl: 'http://139.199.194.142:80/images/avatar.png',
                uploadUrl:this.surl+'avatar?sessionID='+this.$cookie.get('sessionID'),
                headers:{"Content-Type": 'multipart/form-data' },
                imgDataUrl:''
            }
        },
        components: {
            'avatar-upload': avatarUpload
        },
        methods: {
            toggleShow() {
                this.show = !this.show;
            },
            cropSuccess(imgDataUrl, field){
                console.log(imgDataUrl);
                this.imgDataUrl = imgDataUrl;
            },
            cropUploadSuccess(jsonData, field){
                this.imgUrl='http://139.199.194.142:80/images/avatar.png?'+Math.random();
            },
            cropUploadFail(status, field){

            }
        }
    }
</script> 